<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极简番茄计时器</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <style>
    @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
    </style>
    <!-- 统一的 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#B52B2D',
                        secondary: '#10b981',
                        neutral: '#312828',
                        light: '#F9F9F5',
                        dark: '#111827'
                    },
                    fontFamily: {
                    inter: ['Inter', 'monospace'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .timer-ring {
                transition: stroke-dashoffset 1s linear;
                transform: rotate(-90deg);
                transform-origin: 50% 50%;
            }
        }
    </style>
</head>
<body class="bg-light min-h-screen flex flex-col items-center justify-center p-4 pt-16 md:pt-0 transition-all duration-500">
    <div class="max-w-md w-full mx-auto flex flex-col items-center px-4">
        <!-- 标题 -->
        <h1 class="font-serif font-bold text-[clamp(1.8rem,5vw,2.5rem)] text-neutral mb-6 md:mb-8 text-center">番茄工作法</h1>
        
        <!-- 计时器容器 - 响应式大小 -->
        <div class="relative mb-6 w-[clamp(200px,70vw,280px)] h-[clamp(200px,70vw,280px)]">
            <!-- SVG 圆环 -->
            <svg class="w-full h-full" viewBox="0 0 100 100">
                <!-- 背景圆环 -->
                <circle cx="50" cy="50" r="45" fill="none" stroke="#DFDED7" stroke-width="4"></circle>
                
                <!-- 进度圆环 -->
                <circle id="timer-ring" class="timer-ring cx-50 cy-50 r-45 fill-none stroke-primary stroke-4" stroke-dasharray="282.74" stroke-dashoffset="0"></circle>
            </svg>
            
            <!-- 计时器显示 -->
            <div class="absolute inset-0 flex flex-col items-center justify-center">
                <span id="timer-display" class="font-serif text-[clamp(2.5rem,8vw,3.5rem)] font-bold text-primary">25:00</span>
                <span id="timer-status" class="text-[clamp(0.8rem,2vw,1rem)] text-gray-500 mt-2">准备开始工作</span>
            </div>
        </div>
        
        <!-- 控制按钮 - 在小屏幕上堆叠显示 -->
        <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4 mb-6 w-full max-w-xs">
            <button id="start-btn" class="flex-1 px-6 py-3 bg-primary text-white rounded-full hover:bg-opacity-90 transition-all-300 flex items-center justify-center">
                <i class="fa fa-play mr-2"></i> 开始
            </button>
            <button id="reset-btn" class="flex-1 px-6 py-3 bg-gray-200 text-neutral rounded-full hover:bg-gray-300 transition-all-300 flex items-center justify-center">
                <i class="fa fa-refresh mr-2"></i> 重置
            </button>
        </div>
        
        <!-- 模式切换 -->
        <div class="flex justify-center mb-6 w-full">
            <div class="inline-flex rounded-full w-full max-w-xs" role="group">
                <button id="work-mode" class="flex-1 px-4 py-2 text-sm font-medium bg-primary text-white rounded-l-full hover:bg-opacity-90 focus:z-10">工作模式</button>
                <button id="break-mode" class="flex-1 px-4 py-2 text-sm font-medium bg-gray-200 text-neutral rounded-r-full hover:bg-secondary hover:text-white focus:z-10 transition-all-300">休息模式</button>
            </div>
        </div>
        
        <!-- 设置与统计 - 在小屏幕上调整内边距和字体 -->
        <div class="w-full bg-white rounded-lg shadow-sm p-4 md:p-5">
            
            <!-- 自定义设置 -->
            <div class="mb-5">
                <h3 class="text-md font-medium text-neutral mb-3">自定义时间</h3>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label for="work-time" class="block text-sm font-medium text-gray-700 mb-1">工作时间 (分钟)</label>
                        <input type="number" id="work-time" class="font-serif w-full px-3 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="25" min="1" max="60">
                    </div>
                    <div>
                        <label for="break-time" class="block text-sm font-medium text-gray-700 mb-1">休息时间 (分钟)</label>
                        <input type="number" id="break-time" class="font-serif w-full px-3 py-2 border border-gray-200 rounded-full focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" value="5" min="1" max="30">
                    </div>
                </div>
            </div>
            
            <!-- 分隔线 -->
            <div class="border-t border-gray-100 my-3"></div>
            
            <!-- 统计信息 - 响应式布局 -->
            <div>
                <h3 class="text-md font-medium text-neutral mb-3">今日统计</h3>
                <div class="flex justify-between items-center">
                    <div class="text-center flex-1">
                        <p class="text-sm text-gray-500">已完成番茄数</p>
                        <p id="completed-pomodoros" class="font-serif text-xl md:text-2xl font-bold text-neutral">0</p>
                    </div>
                    <div class="text-center flex-1">
                        <p class="text-sm text-gray-500">专注时间</p>
                        <p id="focus-time" class="font-serif text-xl md:text-2xl font-bold text-neutral">0</p>
                    </div>
                    <div class="text-center flex-1">
                        <p class="text-sm text-gray-500">当前连续</p>
                        <p id="current-streak" class="font-serif text-xl md:text-2xl font-bold text-neutral">0</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 状态变量
        let timer = null;
        let isRunning = false;
        let isWorkMode = true;
        let timeLeft = 25 * 60; // 默认25分钟（秒）
        let workTime = 25 * 60; // 工作时间（秒）
        let breakTime = 5 * 60; // 休息时间（秒）
        
        // 统计数据
        let completedPomodoros = 0;
        let focusTime = 0;
        let currentStreak = 0;
        
        // DOM 元素
        const timerDisplay = document.getElementById('timer-display');
        const timerStatus = document.getElementById('timer-status');
        const timerRing = document.getElementById('timer-ring');
        const startBtn = document.getElementById('start-btn');
        const resetBtn = document.getElementById('reset-btn');
        const workModeBtn = document.getElementById('work-mode');
        const breakModeBtn = document.getElementById('break-mode');
        const workTimeInput = document.getElementById('work-time');
        const breakTimeInput = document.getElementById('break-time');
        const completedPomodorosEl = document.getElementById('completed-pomodoros');
        const focusTimeEl = document.getElementById('focus-time');
        const currentStreakEl = document.getElementById('current-streak');
        
        // 初始化圆环
        const ringRadius = timerRing.r.baseVal.value;
        const ringCircumference = 2 * Math.PI * ringRadius;
        timerRing.style.strokeDasharray = ringCircumference;
        updateRingProgress(1); // 初始化为满进度
        
        // 格式化时间（秒 -> MM:SS）
        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
        }
        
        // 更新圆环进度
        function updateRingProgress(progress) {
            const offset = ringCircumference * (1 - progress);
            timerRing.style.strokeDashoffset = offset;
        }
        
        // 更新计时器显示
        function updateTimerDisplay() {
            timerDisplay.textContent = formatTime(timeLeft);
            
            // 计算进度
            const totalTime = isWorkMode ? workTime : breakTime;
            const progress = timeLeft / totalTime;
            updateRingProgress(progress);
            
            // 更新状态文本
            timerStatus.textContent = isRunning 
                ? (isWorkMode ? '专注工作中...' : '休息放松中...') 
                : (isWorkMode ? '准备开始工作' : '准备开始休息');
        }
        
        // 切换模式
        function toggleMode(mode) {
            if (isRunning) return; // 运行时不允许切换模式
            
            isWorkMode = mode === 'work';
            timeLeft = isWorkMode ? workTime : breakTime;
            
            // 更新UI
            if (isWorkMode) {
                workModeBtn.classList.remove('bg-gray-200', 'text-neutral');
                workModeBtn.classList.add('bg-primary', 'text-white');
                breakModeBtn.classList.remove('bg-secondary', 'text-white');
                breakModeBtn.classList.add('bg-gray-200', 'text-neutral');
                timerRing.classList.remove('stroke-secondary');
                timerRing.classList.add('stroke-primary');
            } else {
                breakModeBtn.classList.remove('bg-gray-200', 'text-neutral');
                breakModeBtn.classList.add('bg-secondary', 'text-white');
                workModeBtn.classList.remove('bg-primary', 'text-white');
                workModeBtn.classList.add('bg-gray-200', 'text-neutral');
                timerRing.classList.remove('stroke-primary');
                timerRing.classList.add('stroke-secondary');
            }
            
            updateTimerDisplay();
        }
        
        // 开始/暂停计时器
        function toggleTimer() {
            if (isRunning) {
                // 暂停计时器
                clearInterval(timer);
                startBtn.innerHTML = '<i class="fa fa-play mr-2"></i> 继续';
                timerStatus.textContent = isWorkMode ? '工作已暂停' : '休息已暂停';
            } else {
                // 开始计时器
                timer = setInterval(() => {
                    timeLeft--;
                    
                    if (timeLeft <= 0) {
                        // 计时结束
                        clearInterval(timer);
                        isRunning = false;
                        startBtn.innerHTML = '<i class="fa fa-play mr-2"></i> 开始';
                        
                        // 播放提示音
                        const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
                        audio.play().catch(e => console.log('提示音播放失败:', e));
                        
                        if (isWorkMode) {
                            // 工作计时结束，切换到休息模式
                            completedPomodoros++;
                            focusTime += workTime / 60;
                            currentStreak++;
                            updateStats();
                            
                            timerStatus.textContent = '工作完成！休息一下吧';
                            setTimeout(() => {
                                toggleMode('break');
                            }, 2000);
                        } else {
                            // 休息计时结束，切换到工作模式
                            timerStatus.textContent = '休息结束！开始新的工作吧';
                            setTimeout(() => {
                                toggleMode('work');
                            }, 2000);
                        }
                    }
                    
                    updateTimerDisplay();
                }, 1000);
                
                startBtn.innerHTML = '<i class="fa fa-pause mr-2"></i> 暂停';
            }
            
            isRunning = !isRunning;
        }
        
        // 重置计时器
        function resetTimer() {
            clearInterval(timer);
            isRunning = false;
            timeLeft = isWorkMode ? workTime : breakTime;
            startBtn.innerHTML = '<i class="fa fa-play mr-2"></i> 开始';
            updateTimerDisplay();
        }
        
        // 更新统计数据
        function updateStats() {
            completedPomodorosEl.textContent = completedPomodoros;
            focusTimeEl.textContent = `${focusTime}分钟`;
            currentStreakEl.textContent = currentStreak;
            
            // 保存到本地存储
            localStorage.setItem('pomodoroStats', JSON.stringify({
                completedPomodoros,
                focusTime,
                currentStreak
            }));
        }
        
        // 加载保存的统计数据
        function loadStats() {
            const savedStats = localStorage.getItem('pomodoroStats');
            if (savedStats) {
                const stats = JSON.parse(savedStats);
                completedPomodoros = stats.completedPomodoros || 0;
                focusTime = stats.focusTime || 0;
                currentStreak = stats.currentStreak || 0;
                updateStats();
            }
        }
        
        // 更新时间设置
        function updateTimeSettings() {
            workTime = parseInt(workTimeInput.value) * 60;
            breakTime = parseInt(breakTimeInput.value) * 60;
            
            // 如果当前不在运行状态，更新剩余时间
            if (!isRunning) {
                timeLeft = isWorkMode ? workTime : breakTime;
                updateTimerDisplay();
            }
            
            // 保存到本地存储
            localStorage.setItem('pomodoroSettings', JSON.stringify({
                workTime: workTime / 60,
                breakTime: breakTime / 60
            }));
        }
        
        // 加载保存的设置
        function loadSettings() {
            const savedSettings = localStorage.getItem('pomodoroSettings');
            if (savedSettings) {
                const settings = JSON.parse(savedSettings);
                workTime = settings.workTime * 60;
                breakTime = settings.breakTime * 60;
                workTimeInput.value = settings.workTime;
                breakTimeInput.value = settings.breakTime;
                
                // 更新剩余时间
                if (!isRunning) {
                    timeLeft = isWorkMode ? workTime : breakTime;
                    updateTimerDisplay();
                }
            }
        }
        
        // 事件监听
        startBtn.addEventListener('click', toggleTimer);
        resetBtn.addEventListener('click', resetTimer);
        workModeBtn.addEventListener('click', () => toggleMode('work'));
        breakModeBtn.addEventListener('click', () => toggleMode('break'));
        workTimeInput.addEventListener('change', updateTimeSettings);
        breakTimeInput.addEventListener('change', updateTimeSettings);
        
        // 初始化
        updateTimerDisplay();
        loadStats();
        loadSettings();
    </script>
</body>
</html>
